<template>
    <div class="playlittle" @click="gosongplay">
        <img :src="store.state.nowplay.img">
        <div class="content">
            <div class="name_word"> <span>{{ store.state.nowplay.name }}</span>
                <span class="al">{{ store.state.nowplay.al }}</span>
            </div>
            <div class="icon_bj">
                <van-icon :name="state" @click="changeplaystate($event)" class="icon_play_pause" />
                <div class='iconfont icon-24gl-playlistMusic3' @click="showplaylist"></div>
            </div>

        </div>
    </div>

</template>

<script setup>

import { ref, onMounted } from 'vue'
import { useStore } from 'vuex' // 引入useStore 方法
import { useRouter } from 'vue-router';


onMounted(() => {
    setTimeout(() => {
        state.value = store.state.nowplay.state
    }, 100)

})
let state = ref('play')
const store = useStore()  // 该方法用于返回store 实例
const router = useRouter()
const changeplaystate = ($event) => {
    $event.stopPropagation()
    if (state.value == 'play') {
        store.state.audio.play()
        state.value = 'pause'
        store.state.nowplay.state = 'pause'
    } else {
        store.state.audio.pause()
        state.value = 'play'
        store.state.nowplay.state = 'play'
    }
}

const gosongplay = () => {
    router.push({
        path: '/songplay'
    })
    if (store.state.nowplay.currentTime == '00:00') {
        store.state.nowplay.length = 0
    }
}
const showplaylist = ($event) => {
    $event.stopPropagation()
    store.state.ifshowplaylist = true
}
</script>


<style scoped lang="less">
.playlittle {
    position: relative;
    background-color: #F9FBFA;
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding: 10px;
    line-height: 40px;
    text-align: center;

    .al {
        margin: 0 10px;
        color: #ABB0B7;
        width: 10px;
     
    }

    .name_word {
        width: 200px;
        height: 40px;
        position: absolute;
        left: 20%;
        overflow: hidden;
    }

    .icon_bj {
        display: flex;
        position: absolute;
        right: 10%;
    }
    .icon_play_pause{
        margin: 10px 20px;
    }
}

img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    left: 5%;
    // margin: 0 10px;
}
</style>